<template>
	<view class="page flex-col">
		<cu-custom bgColor="bg-gradual-red" id="cu-custom" :isBack="true">
			<block slot="content">标的详情页</block>
		</cu-custom>
		<view class="banner">
			<view v-if="loopData.currentItemId != null && loopData.currentItemId != ''" @click="successclik" class="jumpbox" :style="[{top : CustomBar + 5 + 'px'}]">
				<image class="image" src="/static/home/128/lu.png" mode="widthFix"></image><view class="h6">前往该拍卖会正在进行中的标的物</view>
			</view>
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<!-- circular  interval="3000" -->
				<template v-for="(item,index) in loopData.fileList">
					<swiper-item v-if="item.fileType == 'img' || item.fileType == 'video'">
						<image @click.stop="swiperPreview(item,index)" v-if="item.fileType == 'img'"
							:src="$getFileAccessHttpUrl(item.filePath)" mode="aspectFill"></image>
						<video :loop="true" controls muted play-strategy="" v-if="item.fileType == 'video'"
							:src="$getFileAccessHttpUrl(item.filePath)"></video>
					</swiper-item>
				</template>
			</swiper>
			<view class="titleTop" v-for="(item,index) in dangerListhository.slice(0, 1)">
				<image class="image" src="/static/home/128/wenan.png" mode="aspectFill"></image>
				<view class="bottom">{{item.biddingNo}} ￥{{item.money}} <text>{{item.status_dictText}}</text></view>
			</view>
			<view class="price">

				<view class="priceRight">
					<block v-if="loopData.status == 5">
						<view class="box">
							暂停中
						</view>
					</block>
					<block v-if="loopData.status == 1 && startTimeShow == false">
						<view class="box">
							距开始
						</view>
						{{liveCountdown == '00天00时00分00秒' ? apiitemdetail() : liveCountdown}}
					</block>
					<block v-if="loopData.status == 1 && startTimeShow == true">
						<view class="box">
							等待拍卖师操作
						</view>
					</block>
					<block v-if="loopData.status == 2 && jxTimeShow == false">
						<view class="lefbox">
							<view class="box">
								正在进行
							</view>
							{{liveCountdown == '00天00时00分00秒' ? apiitemdetail() : liveCountdown}}
						</view>

						<view class="" style="margin-left:5px;">
							{{loopData.auctionStage == 1 ? '自由竞价阶段' : loopData.auctionStage == 3 ? '降价阶段' :'限时竞价阶段'}}
						</view>
					</block>
					<block v-if="loopData.status == 2 && jxTimeShow == true">
						<view class="box">
							等待拍卖师操作
						</view>
					</block>
					<block v-if="loopData.status == 3">
						<view class="box">
							已成交
						</view>
						{{loopData.endTime}} 结束
					</block>
					<block v-if="loopData.status == 4">

						<view class="box">
							流拍
						</view>
						{{loopData.endTime}} 结束
					</block>
				</view>
			</view>
			<view class="ticontent">
				<view class="top">
					{{loopData.itemName}}
				</view>
				<view class="bottom">
					<view class="icon">
						<view class="example-body">
							<uni-fav :checked="loopData.interestId != null ? !checkList : checkList"
								:content-text="contentText"
								@click="favClick(loopData.interestId != null ? !checkList : checkList)" />
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="bidding margin-top">
			<view class="top">
				<view class="left">竞价记录</view>
				<view class="right">
					<view class="num">出价{{scrollTotal}}次</view>
					<view class="histoy" @click="histoy">历史竞价</view>
				</view>

			</view>
			<view class="betten">
				<view class="li" v-for="(item,index) in dangerListhository.slice(0, 3)" :key="index">
					<view class="one ">{{item.status_dictText}}</view>
					<view class="two center">
						<view class="curie" v-if="item.preemption == 1">优</view>{{item.biddingNo}}
					</view>
					<view class="three center">{{item.createTime}}</view>
					<view class="four">￥{{towNumber(item.money)}}</view>
				</view>
				<empty v-if="dangerListhository.length == 0"></empty>
			</view>
		</view>

		<view class="registrationContent margin-top">
			<view class="resgibox">
				<view class="top">
					<view class="btn">{{loopData.statusText}}</view>
					<view class="title">报名截至时间{{auctionData.applyTime}}结束</view>
				</view>
				<view class="middle">
					<img class="middimg" v-if="loopData.status == 3" src="/static/img/bingdata.6cf3e889.png" mode="widthFix">
					<view class="left">
						<view class="fontcontent" v-if="loopData.status == 0 || loopData.status == 1">
							<view class="qipai">起拍价</view>
							<view class="font">
								<view class="b">{{loopData.startingPrice}}</view>
								<view class="yuan">元<view v-if="loopData.itemUnit != null  && loopData.auctionWay == 2">
										/{{loopData.itemUnit}}</view>
								</view>
							</view>
						</view>
						<view class="fontcontent" v-if="loopData.status == 2 || loopData.status == 5">
							<view class="qipai">当前价</view>
							<view class="font">
								<view class="b">{{loopData.currentPrice == null ? '' : loopData.currentPrice}}</view>
								<view class="yuan">元<view v-if="loopData.itemUnit != null  && loopData.auctionWay == 2">
										/{{loopData.itemUnit}}</view>
								</view>
							</view>
						</view>
						<view class="fontcontent" v-if="loopData.status == 3">
							<view class="qipai">成交价</view>
							<view class="font">
								<view class="b">{{loopData.closingPrice == null ? '' : towNumber(loopData.closingPrice)}}</view>
								<view class="yuan">元<view v-if="loopData.itemUnit != null  && loopData.auctionWay == 2">
										/{{loopData.itemUnit}}</view>
								</view>
							</view>
						</view>
						<view v-else></view>
					</view>
					<view class="boxcentent" v-if="loopData.hasApply == false && ! applyTime">
						<text @click="clickauction">报名</text>
					</view>
					<view class="boxcentent"
						v-if="(loopData.status == 1 || loopData.status == 2 || loopData.status == 5) && loopData.hasApply == true">
						<text style="border: 1px solid #DD514C;color:#DD514C;" class="hui" v-if="loopData.biddingNo == '' || loopData.biddingNo == null">已报名</text>
						<text class="hui" v-else>竞拍号：{{loopData.biddingNo}}</text>
					</view>
					<view class="boxcentent" v-if="loopData.status == 3">
						<text class="hui" style="border: 1px solid #B81D22;color: #B81D22;">本标的已成交</text>
					</view>
					<view class="boxcentent" v-if="loopData.status == 4">
						<text class="hui">本标的流拍</text>
					</view>
				</view>
				<!-- <view class="import">
					<view class="left">
						<view class="btn">!</view>
						<view class="font">成交后，需向中拍卖另付0.15的软件使用费</view>
					</view>
					<view class="right">查看详情>></view>
				</view> -->
				<view class="import" v-if="loopData.brokerage == 1">
					<view class="left">
						<view class="btn">!</view>
						<view class="font">成交后，需向拍卖企业另付拍卖佣金，具体规则请联系拍卖企业 </view>
					</view>
				</view>
				<view class="detailtitle">
					<view class="font two">起拍价：{{loopData.startingPrice}}元<view
							v-if="loopData.itemUnit != null && loopData.auctionWay == 2">
							/{{loopData.itemUnit}}</view>
					</view>
					<view class="font two">评估价：{{loopData.valuation}}元</view>

					<view class="font two">加价幅度：<view class="red">{{loopData.priceRange}}元</view>
					</view>
					<view class="font three">保证金：{{loopData.earnestMoney}}元</view>
					<view class="font three">
						保留价：{{loopData.reservePrice != null && loopData.reservePrice != '' ? '有' : '无'}}</view>
					<view class="font percent">保证金截止时间：{{loopData.warrantyTime}}</view>
					<view class="font percent">优先购买权人：{{loopData.preemption == 0 ? '无' : '有'}}</view>
					<block v-if="loopData.auctionType == 1 || loopData.auctionType == 3">
						<view class="font three">自由竞价时间：{{loopData.freeBiddingTimeText}}</view>
						<view class="font three">限时竞价时间：{{loopData.limitBiddingTimeText}}</view>
					</block>
					<view class="font percent" v-if="loopData.auctionType == 2 || loopData.auctionType == 3">降价时间：{{loopData.depreciateTimeText}}</view>
					<view class="font three" v-if="loopData.itemNum != null && loopData.auctionWay == 2">标的数量：{{loopData.itemNum}}</view>
					<view class="font three">
						报名限制：{{loopData.applyLimit == 0 ? '不限' : loopData.applyLimit == 2 ? '个人' : '机构'}}</view>
					<view class="font percent">
						所在地：{{loopData.city == null ? '' : loopData.city}}{{loopData.address == null ? '' : loopData.address}}
					</view>
				</view>
			</view>

			<view class="biddingDetail">
				<view class="borderwidth"></view>
				<view class="notice">标的物详情</view>
				<view class="content">
					<rich-text :nodes="introduce"></rich-text>
					<!-- <image class="image" src="/static/home/128/wenan.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>

		<view class="unisection" @click="openchat">
			<view v-if="showicon" class="uniseradio"></view>
			<view class="fidxe">
				<uni-icons class="fidxeicon" type="chat" size="30"></uni-icons>
			</view>
		</view>
		<!-- 悬浮聊天框 -->
		<view class="holdon animation-slide-bottom" :class="[chatshow ? 'active' : '']"
			:style="[{animationDelay: '0.2s'}]">
			<view class="ball"
				:style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
				@touchstart.stop.prevent="drag_start" @touchmove.prevent="drag_hmove" mode="aspectFit">
				拖拽位置
			</view>
			<view class="chatContent"
				:style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')">
				<view class="tuozhuai">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
						styleType="button" activeColor="#B81D22"></uni-segmented-control>
					<view class="content">
						<view v-show="current === 0">
							<scroll-view id="commentContainer" scroll-with-animation="true"
								v-if="commentlistData.length != 0" :scroll-top="boxscrollTop" scroll-y="true"
								class="scroll-Y paiList leftMain">
								<!-- <view id="commentContent" class="paiList leftMain" v-if="commentlistData.length != 0"> -->
								<view class="ul" v-for="(item,index) in commentlistData">
									<view class="h6">{{item.type == 1 ? '系统消息：' : '拍卖师发言：'}}
										<view class="span">{{item.createTime}}</view>
									</view>
									<view class="cont">{{item.content}}</view>
								</view>
								<!-- </view> -->
								<empty v-if="commentlistData.length == 0"></empty>
							</scroll-view>
						</view>
						<view v-show="current === 1">
							<view class="tuphoto">
								<image class="image" :src="$getFileAccessHttpUrl(auctioneerData.avatar)"
									mode="aspectFill"></image>
								<view class="h6">{{auctioneerData.realname }}</view>
								<view class="h5">拍卖师证号：{{auctioneerData.workNo}}</view>
							</view>
						</view>
					</view>
					<view class="flex flex-direction chatbtn logintop">
						<button class="cu-btn bg-red shadow" @tap="chatclose" type="warn" plain="true">关闭</button>
					</view>
				</view>

			</view>
		</view>

		<!-- 查看下一个标的详情页/出价 -->
		<view class="positi animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
			<view class="jingjiaBox padding animation-slide-top"
				v-if="!ifshow && loopData.status == 2 && loopData.hasApply" :style="[{animationDelay: '0.2s'}]">
				请出价：
				<uni-easyinput class="jingjiaInput" v-model="biddingmoney" type="number" placeholder="请输入价格" /><button
					class="cu-btn bg-red shadow" type="warn" @click="checkNum">提交</button>
			</view>
			<view class="flex twobtn padding animation-slide-bottom"
				v-if="(subjectreturn.length >= 1 || subjectnext.length >= 2 ) && ifshow"
				:style="[{animationDelay: '0.2s'}]">
				<button v-if="subjectreturn.length >= 1" class="cu-btn bg-red shadow" @tap="lookMore(1)" type="warn"
					plain="true">查看上一个</button>
				<button v-if="subjectnext.length > 1" class="cu-btn bg-red shadow" @tap="lookMore(2)"
					type="warn">查看下一个</button>
			</view>
		</view>

		<!-- 竞拍须知 -->
		<uni-popup ref="Biddingpopup" type="bottom" :mask-click="false">
			<view class="scortop">
				<view class="title">竞拍须知</view>
				<uni-icons type="close" size="30" @click="compcloseBidding"></uni-icons>
			</view>
			<view class="scrollbox">
				<view class="titlecontent">
					<view class="example">
						<rich-text :nodes="instructions"></rich-text>
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button type="warn" class="cu-btn bg-blue lg shadow" :disabled="!stand"
					@click="understand">同意{{ stand ? '' : agreeTime + 's'}}</button>
			</view>
		</uni-popup>

		<!-- 拍卖会报名 -->
		<uni-popup ref="bottompopup" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">报名</view>
				<uni-icons type="close" size="30" @click="compclose"></uni-icons>
			</view>
			<view class="scrollbox">
				<view class="titlecontent">
					<view class="example">
						<!-- 自定义表单校验 -->
						<uni-forms ref="customForm" :rules="rules" :modelValue="formDataSignup">
							<uni-forms-item label="是否全场报名" required name="applyAll">
								<uni-data-checkbox v-model="formDataSignup.applyAll" :localdata="applyAll" />
							</uni-forms-item>

							<uni-forms-item label="公司/个人名称" required name="companyName">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.companyName"
									placeholder="请输入公司/个人名称" />
							</uni-forms-item>
							<uni-forms-item label="联系方式" required name="contactPhone">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.contactPhone"
									placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="联系人" required name="contactUser">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.contactUser"
									placeholder="请输入联系人" />
							</uni-forms-item>
							<uni-forms-item label="邮箱" required name="email">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.email"
									placeholder="请输入邮箱" />
							</uni-forms-item>
							<uni-forms-item label="是否需要报名费发票" required name="needBill">
								<uni-data-checkbox v-model="formDataSignup.needBill" :localdata="needBill" />
							</uni-forms-item>
							<view v-if="needBillShow">
								<uni-forms-item label="邮寄地址" required name="deliveryAddress">
									<uni-easyinput v-model="formDataSignup.deliveryAddress" placeholder="请输入邮寄地址" />
								</uni-forms-item>
								<uni-forms-item label="税号" required name="taxNo">
									<uni-easyinput v-model="formDataSignup.taxNo" placeholder="请输入税号" />
								</uni-forms-item>
								<uni-forms-item label="发票抬头" required name="titleName">
									<uni-easyinput v-model="formDataSignup.titleName" placeholder="请输入发票抬头" />
								</uni-forms-item>
							</view>


						</uni-forms>
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg shadow" @click="submit">提交</button>
			</view>
		</uni-popup>

		<!-- 历史竞价记录 -->
		<uni-popup ref="histoypopup" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">历史竞价</view>
				<uni-icons type="close" size="30" @click="compcloseHistoy"></uni-icons>
			</view>
			<view class="scrollbox">
				<scroll-view @scrolltolower="lowerBottomTwo" @refresherrefresh="getFresh" scroll-y="true"
					class="scrollHeight">
					<view class="bidding">
						<view class="betten">
							<view class="li" v-for="(item,index) in dangerList" :key="index">
								<view class="one ">{{item.status_dictText}}</view>
								<view class="two center">
									<view class="curie" v-if="item.preemption == 1">优</view>{{item.biddingNo}}
								</view>
								<view class="three center">{{item.createTime}}</view>
								<view class="four">￥{{towNumber(item.money)}}</view>
							</view>
							<view class="loadingType">{{loadingType == true ?'没有更多数据了!' : '上拉显示更多'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 付款弹框 -->
		<uni-popup ref="popupcenter" class="popupcenter" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">付款二维码</view>
				<uni-icons type="close" size="30" @click="compclosepopupcenter"></uni-icons>
			</view>
			<view class="padding poputchan">
				<view class="">长按识别二维码(点击打开长按保存)</view>
			</view>
			<view>
				<!-- 二维码 -->
				<view class="qr-box">
					<canvas canvas-id="qrcode" @click.stop="photoPreview(urlCode,0)"
						style="width: 300rpx;margin: 0 auto;" />
					<image hidden :src="urlCode" mode="aspectFill"></image>
				</view>
			</view>
			<view class="padding poputchan">
				<view class="" style="color: red;">{{orderMessage}}</view>
			</view>
		</uni-popup>

		<!-- 竞拍成功弹框 -->
		<uni-popup ref="popupsucess" class="popupcenter" type="center" :mask-click="true">
<!-- 			<view class="scortop">
				<view class="title">竞拍成功</view>
				<uni-icons type="close" size="30" @click="compclosepopupsucess"></uni-icons>
			</view> -->
			<view>
				<view class="qr-box">
					<view class="boxleft">恭喜你，竞拍成功！</view>
					<image class="boximg" src="../static/bingdata.png" mode="widthFix"></image>
					<image class="lipao" src="/static/home/128/lipao.gif" mode="widthFix"></image>
					
				</view>
			</view>
			<!-- <view class="padding poputchan">
				<view class="" style="color: red;">12345678</view>
			</view> -->
		</uni-popup>

	</view>
</template>

<script>
	import {
		USER_INFO
	} from "@/common/util/constants"
	import server from '@/api/server.js'
	import uQRCode from '@/common/util/uqrcode' //引入uqrcode.js
	// 实时通讯
	import socket from '@/common/js-sdk/socket/auctionsocket.js'
	import {
		decryption
	} from '@/common/util/aesEncrypt'
	export default {
		//悬浮球绝对位置百分比，页面刷新会回到这个位置
		props: {
			x: {
				type: Number,
				default: 15
			},
			y: {
				type: Number,
				default: 15
			},
			image: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				boxscrollTop: 0,
				startTimeShow: false,
				jxTimeShow: false,
				urlCode: '',
				applyTime: true,
				//实时通讯
				msgCount: 0,
				msgTxt: '',
				checkList: false,
				contentText: {
					contentDefault: '关注',
					contentFav: '已关注'
				},
				stand: false,
				agreeTime: 10,
				chatshow: false,
				needBillShow: false,
				showicon: false,
				introduce: '',
				formDataSignup: {
					applyAll: 0,
					needBill: 0,
					companyName: '',
					contactPhone: '',
					contactUser: '',
					email: '',
				},
				// 单选数据源
				needBill: [{
					text: '否',
					value: 0
				}, {
					text: '是',
					value: 1
				}],
				applyAll: [{
					text: '否',
					value: 0
				}, {
					text: '是',
					value: 1
				}],
				rules: {
					// applyAll: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择报名，不能为空！',
					// 	}, ]
					// },
					companyName: {
						rules: [{
							required: true,
							errorMessage: '请输入公司/个人名称！',
						}, ]
					},
					contactPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式！',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[3456789]\d{9}$/;
								if (!iphoneReg.test(value)) {
									callback('联系方式格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					contactUser: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人！',
						}, ]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱！',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
								if (!email.test(value)) {
									callback('邮箱格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					taxNo: {
						rules: [{
							required: true,
							errorMessage: '请输入税号！',
						}, ]
					},
					titleName: {
						rules: [{
							required: true,
							errorMessage: '请输入发票抬头！',
						}, ]
					},

				},
				items: ['拍卖师发言', '拍卖师信息'],
				current: 0,
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				instructions: '',

				loopData: {},
				auctionData: {},
				liveCountdown: '',
				downTime: '',
				startTime: '2022-03-25 20:20:20',
				bottomDistinct: 10, //距离底部多少像素时触发
				screenHeight: 0, //屏幕高度
				ifshow: false, //是否显示下一个标的详情页
				subjectnext: [],
				subjectreturn: [],
				commentlistData: [],
				auctioneerData: {},
				histoyData: [],
				dangerList: [],
				dangerListhository: [],
				itemlistdata: [],
				onReachobj: {
					auctionItemId: '',
					pageNo: 1,
					pageSize: 10,
				},
				orderMessage: '',
				scrollTotal: 0,
				loadingType: false,
				interval: null,
				biddingmoney: null,
				timeurlCode: null,
				userId: '',
				wmssjH: '',
			};
		},
		watch: {
			'formDataSignup.needBill': {
				handler(newName, oldName) {
					if (newName == 1) {
						this.needBillShow = true
					} else {
						this.needBillShow = false
					}
					console.log(newName)
				},
				immediate: true
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '标的详情页'
			});
		},
		onShow() {
			//获取系统分辨率
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight

			this.$nextTick(function() {
				var arr1 = []
				var arr2 = []
				arr1 = this.$store.state.subjectreturn //查看上一个标的详情页
				arr2 = this.$store.state.subjectnext //查看下一个标的详情页
				this.subjectreturn = arr1.concat()
				this.subjectnext = arr2.concat()
			})



			this.id = this.$root.$mp.query.id

			this.userId = uni.getStorageSync(USER_INFO).id
			console.log('this.userId', this.userId)
			this.apiitemdetail()
			this.scrolldata()
		},

		mounted() {
			this.showye = this.$root.$mp.query.showye
			console.log('this.showye', this.showye)
			// //页面加载时取得屏幕高度
			// this.$nextTick(function() {
			// 	uni.createSelectorQuery().select('.page').boundingClientRect(res => {
			// 		console.log(res, 'ressssss')
			// 		this.screenHeight = res.bottom;
			// 	}).exec();
			// })
			// 启动webSocket
			this.initMenu()
			//获取发言
			this.commentlist()
		},
		beforeDestroy() {
			console.log("this.liveCountTimes", '22222222222222222222222222222')
			socket.closeSocket();
			clearInterval(this.timeurlCode)
			this.timeurlCode = null;
			clearInterval(this.liveCountTimes)
			this.liveCountTimes = null;
		},
		onReachBottom() {
			console.log("加载数据的方法");
		},
		computed: {

		},
		// beforeDestroy(){
		// 	clearInterval(this.timer) 
		// },
		methods: {
			//小数点两位
			towNumber(val) {      
			 return val.toFixed(2)    
			},
			//竞拍成功弹框
			successclik() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/page_myauction/subjectdetail/subjectdetail?id=' + this.loopData.currentItemId + '&auctionId=' +
						this.$root.$mp.query.auctionId
				})
				 // this.$refs.popupsucess.open()
			},
			//图片预览
			swiperPreview(data, index) {
				console.log(data)
				let photoList = data.map(item => {
					return item.filePath;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			query() {
				var that = this
				//这里获取的是你要固定的元素上个元素的高度和它距离顶部的高度值
				const query = uni.createSelectorQuery().in(this);
				//    query.select('.spacebox').boundingClientRect(data => {
				//       //data.height获取元素高度值  data.top获取距离顶部的值
				//    this.wmssjH = data.top+data.height
				//    }).exec();

				var wmssjH = 0
				query.select('#cu-custom').boundingClientRect(data => {
					console.log('cu-custom', data.height)
					wmssjH += data.height
					that.navHeight = data.height
				}).select('.banner').boundingClientRect(data => {
					console.log('banner', data.height)
					wmssjH += data.height
				}).select('.bidding').boundingClientRect(data => {
					console.log('bidding', data.height)
					wmssjH += data.height
				}).select('.resgibox').boundingClientRect(data => {
					console.log('resgibox', data.height)
					wmssjH += data.height + 100
					that.wmssjH = wmssjH
					console.log('that.wmssjH', that.wmssjH)
				}).exec();



			},
			onPageScroll: function(e) {
				// console.log('e.scrollTop',e.scrollTop)
				var scrollTop = e.scrollTop; //滚动条距离页面顶部的像素
				//如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离)
				if (scrollTop <= this.wmssjH && this.showye) {
					this.ifshow = false
				} else {
					this.ifshow = true
				}

			},
			onuserInfo() {
				this.userInfo = uni.getStorageSync(USER_INFO)
				console.log('userInfo', this.userInfo)
				this.formDataSignup.companyName = this.userInfo.userType == 1 ? this.userInfo.company : this.userInfo
					.userName
					server.getEncryptedString().then(res => {
						this.formDataSignup.contactPhone = decryption(this.userInfo.phone, res.data.result.key, res
							.data.result.iv)
						
						this.formDataSignup.email = decryption(this.userInfo.email, res.data.result.key, res.data
							.result.iv)
					})
				this.formDataSignup.contactUser = this.userInfo.userName
			},
			//实时通讯开始
			initMenu() {
				console.log("-----------tongxun------------")
				this.onSocketOpen()
				this.onSocketReceive()
				//this.loadCount(0);
			},
			onSocketOpen() {
				socket.init(this.$root.$mp.query.auctionId);
			},
			onSocketReceive() {
				var _this = this
				socket.acceptMessage = function(res) {
					console.log("页面收到的消息", res)
					_this.onReachobj.pageNo = 1
					if (res.cmd == 'comment') {
						if (res.msgTxt == 'update') {
							console.log('updateupdate')
							_this.apiitemdetail()
						}else{
							_this.showicon = true
						}
						if(res.biddingNo == _this.loopData.biddingNo){
							_this.$refs.popupsucess.open()
						}
						_this.commentlist()
						_this.scrolldata()
					} else if (res.cmd == 'bidding' && res.msgId == _this.$root.$mp.query.id) {
						console.log('biddingbidding')
						_this.dangerList = []
						_this.onReachobj.pageNo = 1
						_this.apiitemdetail()
						_this.scrolldata()
					}
					// if (res.cmd == "topic") {
					// 	//系统通知
					// 	//_this.loadCount('1')
					// } else if (res.cmd == "user") {
					// 	//用户消息
					// 	//_this.loadCount('2')
					// } else if (res.cmd == 'email') {
					// 	//邮件消息
					// 	_this.loadEmailCount()
					// }
				}
			},
			//实时通讯结束
			//拍卖师发言
			commentlist() {
				server.commentlist({
					auctionId: this.$root.$mp.query.auctionId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						this.commentlistData = res.data.result.records
					}
				})
				server.auctioneer({
					auctionId: this.$root.$mp.query.auctionId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						this.auctioneerData = res.data.result
					}
				})
			},
			lowerBottomTwo() {
				this.scrolldata();
			},
			scrolldata() {
				this.onReachobj.auctionItemId = this.$root.$mp.query.id,
					console.log(this.onReachobj)
				server.biddingList(this.onReachobj).then(res => {
					console.log(res)
					this.scrollTotal = res.data.result.total
					if (res.data.result.records.length != 10) { //没有数据
						console.log('1111111111111111111111111111111111111')
						this.loadingType = true;
						// return;
					}
					if (this.onReachobj.pageNo == 1) {
						this.dangerListhository = res.data.result.records //历史竞价前三条
					}
					this.onReachobj.pageNo++; //每触底一次 page +1					
					this.dangerList = this.dangerList.concat(res.data.result.records); //将数据拼接在一起
					this.$forceUpdate()
				})
			},
			//历史竞价记录
			histoy() {
				this.dangerList = []
				this.onReachobj.pageNo = 1
				this.$refs.histoypopup.open('top')
				this.scrolldata()
			},
			compcloseHistoy() {
				this.$refs.histoypopup.close()
			},
			favClick(bol) {
				console.log(bol)
				let api;
				let obj = {}
				if (bol) {
					api = server.interestdelete
					obj = {
						id: this.loopData.interestId
					}
				} else {
					api = server.interestadd
					obj = {
						objectId: this.$root.$mp.query.id,
						type: 2
					}
				}

				api(obj).then(res => {
					console.log(res)
					if (res.data.success) {
						this.$tip.toast(bol ? '已取消关注' : '关注成功')
						this.apiitemdetail()
					} else {
						this.$tip.error(res.data.message)
					}
				})

				this.$forceUpdate()
			},
			// 提交报名
			submit(ref) {
				let that = this
				this.$refs.customForm.validate().then(res => {
					res.auctionId = this.$root.$mp.query.auctionId
					res.auctionItemId = this.$root.$mp.query.id
					console.log('success', res);
					console.log('formDataSignup', this.formDataSignup);

					server.applyadd(res).then(res => {
						console.log(res)
						if (res.data.success) {
							that.$tip.toast(res.data.message)
							that.$refs.bottompopup.close()
							if (res.data.result != true) {
								that.getQrOrderNo = res.data.result.orderNo
								// this.requestPayment(res.data.result)
								that.$refs.popupcenter.open('top')
								let urlCode = res.data.result.code_url
								that.qrFun(urlCode)
								that.timeurlCode = setInterval(function() {
									console.log('getCurrentSwiperHeigh1111', 234567654321234567)
									that.apiapplyqueryOrder(that.getQrOrderNo)
								}, 2000)
								// code_url
							}

						} else {
							that.$tip.error(res.data.message)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			//查询订单
			apiapplyqueryOrder(orderNo) {
				server.applyqueryOrder({
					orderNo: orderNo
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						if (res.data.code == 301) { //支付中
							this.orderMessage = res.data.message
						} else if (res.data.code == 200) { //成功
							clearInterval(this.timeurlCode)
							this.timeurlCode = null;
							this.$refs.popupcenter.close()
							this.$tip.success(res.data.message)
							this.apiitemdetail()
						}
					} else {
						this.orderMessage = res.data.message
					}
				})
			},
			//**生成二维码**//
			qrFun(urlCode) {
				let that = this
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: urlCode,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						that.urlCode = res
					}
				})
			},
			requestPayment(obj) {
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					orderInfo: obj.signData,
					// "orderInfo": {
					// 	"appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					// 	"noncestr": obj.nonceStr, // 随机字符串
					// 	"package": obj.package, // 固定值
					// 	 "partnerid": "148*****52", // 微信支付商户号
					// 	 "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
					// 	"timestamp": obj.timeStamp, // 时间戳（单位：秒）
					// 	"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" ,// 签名，这里用的 MD5/RSA 签名
					//}
					success: function(res) {
						console.log('支付成功', res);
						// 业务逻辑。。。
					},
					fail: function(err) {
						console.log('支付失败', err);
					}
				});

			},
			//判断是否为这个数得倍数
			checkNum() {
				let that = this
				var biddingmoney = this.biddingmoney; //出价
				var currentprice = this.loopData.currentPrice // 当前价
				var priceRange = this.loopData.priceRange; //加价幅度

				if (biddingmoney == null) {
					this.$tip.toast('请出价');
					return false;
				} else if (biddingmoney == '') {
					this.$tip.toast('请出价');
					return false;
				} else if (biddingmoney <= currentprice && this.loopData.hasPreemption == false && this.loopData
					.preemption == 0) {
					that.$tip.toast("出价必须高于当前价");
					return false;
				} else if (this.loopData.hasPreemption && this.loopData.preemption == 1 && biddingmoney == currentprice) {
					that.databid()
					return false;
				} else if (biddingmoney - currentprice >= priceRange) {
					that.databid()
					return false;
				} else {
					that.$tip.toast("请出价幅度不少于" + that.loopData.priceRange + "元", false, 'none', 3000);
					return false;
				}
			},
			databid() {
				let that = this
				if (that.loopData.bid == false) {
					that.$tip.toast("您还未交保证金");
				} else {
					that.onbiddinglog(this.biddingmoney)
				}
			},
			//出价
			onbiddinglog(money) {
				server.biddinglog({
					auctionItemId: this.$root.$mp.query.id,
					auctionId: this.$root.$mp.query.auctionId,
					biddingNo: this.loopData.biddingNo,
					money: money
				}).then(res => {
					if (res.data.success) {
						this.$tip.toast("出价成功");
						this.biddingmoney = ''
						// this.scrolldata()
					} else {
						if(res.data.message == '202'){
							this.$tip.toast(res.data.result)
							setTimeout(() => {
								this.onReachobj.pageNo = 1
								this.scrolldata()
							},1500)

						}else{
							this.$tip.error(res.data.message)
						}
					}

				})
			},

			compclose() {
				this.$refs.bottompopup.close()
			},
			compcloseBidding() {
				// clearInterval(this.interval)
				this.$refs.Biddingpopup.close()
				this.clearInterval()
			},
			compclosepopupcenter() {
				this.$refs.popupcenter.close()
			},
			//图片预览保存
			photoPreview(data, index) {
				let photoList = []
				photoList.push(data)
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			//清除定时器
			clearInterval() {
				clearInterval(this.interval)
				this.agreeTime = 10
				this.stand = true
			},
			//了解竞拍须知
			understand() {
				this.compcloseBidding()
				this.$refs.bottompopup.open('top')

			},
			// 了解竞拍须知倒计时
			getCode() {
				server.instructionsquery().then(res => {
					console.log(res, '111111')
					this.stand = false
					this.agreeTime = 10
					if (res.data.success) {
						if (res.data.result != null) {
							this.instructions = res.data.result.replace(
									/<div([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<div')
								.replace(/<div>/ig, '<div style="font-size: 20px; line-height: 25px;">')
								.replace(/<p/gi, '<p style="text-indent:0!;"')
								.replace(/<img/gi,
									'<img style="text-indent:0!important;height:200px!important;width:200px!important;"'
								)

						}
						this.interval = setInterval(() => {
							let times = --this.agreeTime
							this.agreeTime = times < 10 ? '0' + times : times //小于10秒补 0
							if (times == 0) {
								this.clearInterval()
							}
						}, 1000)
					} else {
						this.$tip.error(res.data.message)
					}

				})

			},
			clickauction() {
				// this.$refs.bottompopup.open('top')
				// return

				server.applycheckApply({
					auctionItemId: this.$root.$mp.query.id,
					auctionId: this.$root.$mp.query.auctionId
				}).then(res => {
					console.log(res, '111111')
					if (res.data.success) {
						this.$refs.Biddingpopup.open('top')
						this.onuserInfo() //默认报名信息  
						this.getCode()
					} else {
						this.$tip.error(res.data.message)
					}

				})
			},
			//查看下一个详情
			lookMore(idx) {
				if (idx == 1) {
					console.log(66666666666666666666666666666666)
					var subjectreturn = this.$store.state.subjectreturn
					let jiequ = subjectreturn.splice(-1, 1) //存在就删除
					console.log(jiequ, '213123123')
					//截取的给回返回上一个的数组里面
					let arr = this.$store.state.subjectnext
					arr.push(jiequ[0])
					this.$store.commit('SUBJECT_NEXT', arr)
					uni.redirectTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/page_myauction/subjectdetail/subjectdetail?id=' + jiequ[0]
							.id + '&auctionId=' + this.$root.$mp.query.auctionId + '&showye=' + true
					})


				} else {
					var subjectnext = this.$store.state.subjectnext
					var data = subjectnext.concat()
					// var pushObj = {};
					data.forEach((item, index) => {

						if (item.id == this.$root.$mp.query.id) {
							console.log(index, 'indexindexindex')
							subjectnext.splice(index, 1) //存在就删除

							//截取的给回返回上一个的数组里面
							let arr = this.$store.state.subjectreturn
							arr.push(item)
							this.$store.commit('SUBJECT_RETURN', arr)
							console.log(this.$store.state.subjectreturn, '0000000987654')
						}
					})
					uni.redirectTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/page_myauction/subjectdetail/subjectdetail?id=' + subjectnext[0].id +
							'&auctionId=' + this
							.$root.$mp.query.auctionId + '&showye=' + true
					})

				}






			},
			//获取详情页信息
			apiitemdetail() {
				clearInterval(this.liveCountTimes)
				this.liveCountTimes = null;
				let obj = {
					auctionItemId: this.id
				}
				if (this.userId != undefined) {
					obj.bidderId = this.userId
				}
				server.itemdetail(obj).then(res => {
					console.log(res)
					if (res.data.result.auctionItem.introduce != null) {
						this.introduce = res.data.result.auctionItem.introduce.replace(
								/<div([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<div')
							.replace(/<div>/ig, '<div style="font-size: 20px; line-height: 25px;">')
							.replace(/<p/gi, '<p style="text-indent:0!;"')
							.replace(/<img/gi,
								'<img style="text-indent:0!important;height:200px!important;width:200px!important;"'
							)
					}
					this.loopData = res.data.result.auctionItem
					this.auctionData = res.data.result.auction
					if (this.loopData.hasPreemption && this.loopData.preemption == 1) {
						this.biddingmoney = this.loopData.currentPrice
					} else {
						this.biddingmoney = this.loopData.currentPrice + this.loopData.priceRange
					}
					if (this.loopData.status == 1) {
						let transedPreTime = this.auctionData.startTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						if (preTime <= nowTime) {
							this.startTimeShow = true
						} else {
							this.getLiveTimeCount(this.auctionData.startTime, this.loopData.status)
						}

					} else if (this.loopData.status == 2) {
						if (this.loopData.downTime != '' && this.loopData.downTime != null) {
							this.getLiveTimeCount(this.loopData.downTime, this.loopData.status)
						}

					}
					this.applyTime = this.$public.bjDate(this.auctionData.applyTime, this.$public.getNowTime())
					this.query()
				})
			},
			//关闭聊天
			chatclose() {
				this.chatshow = false
				this.showicon = false
			},
			//打开聊天
			openchat() {
				let that = this
				that.chatshow = true
				that.boxscrollTop = -1
				that.$nextTick(() => {
					let box = uni.createSelectorQuery().select("#commentContainer")
					box.boundingClientRect(function(res) { //定位到你要的class的位置
						console.log("标签获取====>", res)
						that.boxscrollTop = 999999999999
						console.log(that.boxscrollTop)
					}).exec()

				})

			},
			//选项卡
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			getLiveTimeCount(startTime, type) {
				if (startTime) { //如果设置了开始时间
					this.liveCountTimes = setInterval(() => {
						//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime = startTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						// console.log('preTime',preTime)
						// console.log('nowTime',nowTime)
						// console.log('preTime - nowTime',preTime - nowTime)
						let time = (preTime - nowTime) / 1000;
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						this.liveCountdown = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						// console.log('this.liveCountdown',this.liveCountdown)
						if (this.loopData.status != 3 && min == 0 && sec == 0) {
							this.liveCountdown = ''
							clearInterval(this.liveCountTimes)
						} else if (min == 0 && sec == 0) {
							this.liveCountdown = ''
						}
						// if (preTime - nowTime > 0) {

						// } else {
						// 	this.liveCountdown = ''
						// 	console.log('this.liveCountdown',this.liveCountdown)

						// }
					}, 1000)
				} else {
					this.liveCountdown = "开始时间待定"
				}
			},
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			//判断防止悬浮球被拖出页面
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
		},


	}
</script>

<style scoped lang="scss">
	.screen-swiper {
		min-height: 600upx;
	}

	.banner {
		.jumpbox {
			position: fixed;
			top: 5px;
			z-index: 1;
			background: rgba(0, 0, 0, 0.3);
			color: white;
			padding: 4px 14px;
			border-radius: 30px;
			left: 5px;
			display: flex;
			align-items: center;
			.h6{
				text-decoration: underline;
			}
			image,
			.image {
				width: 17px;
				height: 17px;
				margin-right: 5px;
			}
		}

		.titleTop {
			position: absolute;
			top: 10px;
			left: 10px;
			display: flex;
			align-items: center;
			padding: 3px 5px;
			font-size: 12px;
			color: white;
			background: #ee0f0f47;
			border-radius: 4px;

			.image {
				width: 25px;
				height: 25px;
				border-radius: 50%;
				margin-right: 5px;
			}

			.bottom {
				text {
					font-weight: bold;
					margin-left: 5px;
				}
			}
		}

		.price {
			display: flex;
			align-items: center;
			background-image: linear-gradient(45deg, #f43f3b, #B81D22);
			padding: 10px;
			justify-content: space-between;

			.priceLeft {
				color: white;
				font-size: 12px;

				text {
					font-weight: bold;
					font-size: 18px;
				}
			}

			.priceRight {
				color: white;
				font-size: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				    width: 100%;
				.lefbox{
					display: flex;
					align-items: center;
				}
				.box {
					margin-left: 5px;
					padding: 1px 7px;
					background-color: white;
					color: #B81D22;
					border-radius: 10px;
					font-size: 12px;
					margin-right: 5px;
				}
			}
		}
	}

	.ticontent {
		padding: 15px;
		float: left;
		width: 100%;
		background: white;

		.top {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
			text-indent: 2em;
		}

		.bottom {
			float: right;

			.icon {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 14px;

				.image {
					width: 20px;
					height: 20px;
					margin-right: 5px;
				}
			}
		}
	}

	.bidding {
		padding: 15px;
		float: left;
		width: 100%;
		background-color: white;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.left {
				font-weight: bold;
			}

			.right {
				display: flex;
				align-items: center;

				.histoy {
					padding-left: 5px;
					font-size: 12px;
					color: #999;
				}
			}
		}

		.betten {
			.center {
				text-align: center;
			}

			.li {
				display: flex;
				line-height: 35px;

				.one {
					width: 10%;
					font-weight: bold;
					font-size: 14px;
				}

				.two {
					width: 25%;

					.curie {
						display: inline-block;
						background: red;
						border-radius: 30px;
						width: 20px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						color: white;
						font-size: 12px;
					}
				}

				.three {
					width: 45%;
				}


				.four {
					width: 20%;
					text-align: right;
				}
			}
		}
	}

	.registrationContent {
		float: left;
		width: 100%;
		padding: 15px;
		background-color: white;

		.top {
			.btn {
				color: white;
				background-color: #B81D22;
				float: left;
				font-size: 10px;
				padding: 4px 15px;
				border-radius: 30px;
				margin-right: 5px;
			}
		}

		// .middle::before {
		// 	content: '';
		// 	 background: url(../static/bingdata.png) no-repeat;
		// 	width: 100%;
		// 	height: 100%;
		// 	position: absolute;
		// 	background-size: contain;
		// 	right: 0;
		// 	top: 0;
		// 	background-position: right;
		// }

		.middle {
			float: left;
			width: 100%;
			background-color: #62e8b614;
			padding: 15px;
			margin-top: 15px;
			position: relative;
			.middimg{
				    width: 38%;
				    height: 100%;
				    position: absolute;
				    background-size: contain;
				    right: 0;
				    top: 0;
				    background-position: right;
			}
			// background: url(../static/bingdata.png) no-repeat;
			// background-size: 100% 100%;
			// background-position: 100px 100px;
			.left {
				margin-top: 20px;

				.fontcontent {
					color: green;
					display: flex;
					align-items: flex-end;
					font-size: 12px;

					.qipai {
						color: black;
					}

					.font {
						font-size: 14px;
						display: flex;
						align-items: flex-end;

						.b {
							font-size: 20px;
							font-weight: bold;
						}

						.yuan {
							font-size: 12px;
							letter-spacing: 2px;
							display: flex;
						}
					}
				}
			}

			.boxcentent {
				float: left;
				width: 100%;
				text-align: center;
				margin-bottom: 20px;
				margin-top: 20px;

				.hui {
					border: 1px solid #999;
					background: #f5f5f5;
					color: #999;
				}

				text {
					margin: auto;
					line-height: 36px;
					padding: 0 10px;
					background: #B81D22;
					text-align: center;
					color: white;
					border-radius: 7px;
					display: inline-block;
					transition: all .3s;
					letter-spacing: 1px;
				}

				text:active {
					color: #B81D22;
					background: white;
				}
			}
		}

		.import {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			font-size: 12px;
			margin-top: 10px;
			float: left;
			background: #b81d221f;
			color: #B81D22;
			font-weight: bold;
			padding: 6px 4px;

			.btn {
				font-size: 10px;
				background-color: #B81D22;
				color: white;
				float: left;
				padding: 5px;
				width: 16px;
				height: 16px;
				text-align: center;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 5px;
			}

			.font {
				float: left;
			}
		}

		.detailtitle {
			float: left;
			padding-top: 20px;
			border-top: 1px solid #f8f7f7;
			margin-top: 20px;
			width: 100%;

			.font {
				display: flex;
				align-items: center;
				float: left;
				font-size: 12px;
				margin-bottom: 10px;

				&.two {
					width: 33.33%;
				}

				&.three {
					width: 50%;
				}

				&.percent {
					width: 100%;
				}

				.red {
					color: red;
				}
			}
		}
	}

	.biddingDetail {
		position: relative;
		float: left;
		width: 100%;

		.borderwidth {
			width: 70%;
			height: 1px;
			position: absolute;
			top: 13px;
			left: 50%;
			margin-left: -35%;
			background-color: #e3e0e0;
		}

		.notice {
			background: white;
			font-size: 12px;
			position: absolute;
			left: 50%;
			width: 76px;
			margin-left: -38px;
			height: 20px;
			line-height: 20px;
			top: 4px;
			text-align: center;
			color: #999;
		}

		.content {
			line-height: 22px;
			font-size: 12px;
			letter-spacing: 1px;
			color: #666666;
			padding-top: 26px;

			.image {
				width: 100%;
			}

			// div{
			// 	width: auto!important;margin-bottom: 0!important;margin-top: 0!important;margin-left: 0!important;margin-right: 0!important;
			// }
		}
	}

	.holdon {
		transform: translateY(-90%);
		opacity: 0;
		transition: all 0.3s;
		position: fixed;
		top: 20%;
		left: 50%;
		margin-left: -142px;
		display: none;

		&.active {
			transform: translateY(59%);
			opacity: 1;
			display: block;
		}

		.chatbtn {
			position: absolute;
			bottom: 5px;
			width: 80px;
			left: 50%;
			margin-left: -40px;
		}

		.content {
			height: 300px;
			overflow: hidden;
			overflow-y: auto;
			padding: 10px;

			.ul {
				margin-bottom: 10px;

				.h6 {
					display: flex;
					align-items: center;
					font-size: 13px;

					.span {
						color: #999;
						font-size: 12px;
					}
				}

				.cont {
					background: #e9e9e9e9;
					padding: 5px 15px;
					margin-top: 5px;
					font-size: 12px;
					border-radius: 5px;
				}
			}

			.paiList {
				height: 242px;
				overflow-y: auto;
			}
		}
	}

	.ball {
		width: 500rpx;
		height: 60rpx;
		// background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
		background-image: linear-gradient(180deg, #f43f3b, #B81D22);
		border-radius: 50px;
		/* 防止页面滚动条或其他事件跟着动 */
		position: fixed !important;
		z-index: 9999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.chatContent {
		position: absolute;
		width: 500rpx;
		padding-top: 40px;

		.tuozhuai {
			background-color: white;
			border-radius: 5px;

			.tuphoto {
				text-align: center;

				.image {
					width: 150px;
					height: 150px;
					margin: 10px auto 10px;
					display: table;
				}

				.h6,
				.h5 {
					margin-top: 5px;
				}
			}
		}
	}

	.unisection {
		position: fixed;
		right: 2px;
		bottom: 20%;
		background: white;
		border-radius: 30px;
		font-size: 14px;
		border: 1px solid red;
		padding: 2px;

		.uniseradio {
			position: absolute;
			left: 0;
			top: -1px;
			width: 8px;
			height: 8px;
			border-radius: 30px;
			background: red;
		}

	}
	
	.fidxeicon,/deep/.fidxeicon .uni-icons{
		color: #B81D22 !important;
	}

	.positi {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;

		.twobtn {
			justify-content: space-between;

			.cu-btn {
				width: 100%;

				&:nth-child(2) {
					margin-left: 1%;
				}
			}

		}
	}

	.jingjiaBox {
		display: flex;
		align-items: center;
		justify-content: center;

		.jingjiaInput {
			margin-right: 5px;
			color: #e64340;
			background-color: rgba(0, 0, 0, 0);
			width: 350rpx;
			font-size: 15px;
			border-radius: 5px;
			height: 36px;
			box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);

			/deep/.is-input-border {
				border: 1px solid #e64340 !important;
			}

			/deep/.uni-input-input {

				box-sizing: border-box;
			}
		}
	}

	.uni-transition .scrollbox {
		max-height: 400px;
		height: auto;
	}

	.scrollHeight {
		max-height: 400px;
	}
	.popupcenter{
		/deep/.uni-transition {
			background: unset;
		}
		/deep/.uni-popup__wrapper-box {
			background: white;
			border-radius: 20px;
			top: -12px;
		}
		.qr-box{
		    position: relative;
		    height: 137px;
		    width: 300px;
		    line-height: 137px;
		    background-image: linear-gradient(150deg, #ee0505, #e4b1b1);
		    border-radius: 20px;
			.boxleft{
			    text-align: center;
			    font-size: 18px;
			    font-weight: bold;
			    color: #fff700;
			}
			.boximg{
				    height: 210px;
				    width: 130px;
				    position: absolute;
				    right: 0;
				    bottom: 0;
			}
			.lipao{
				height: 210px;
				width: 300px;
				position: absolute;
				right: 0;
				bottom: -148px;
			}
		}
	}
	
	
</style>
